<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <nav class="navbar navbar-expand-lg navbar-dark  p-3">
          <div class="container">
            <a href="/" class="navbar-brand"><img  :src="pageData.config.pcLogo" style="width:50px;heigth:50px"> </a>
            <button
              class="navbar-toggler bg-secondary"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navmenu"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
              <ul class="navbar-nav ms-auto">
                <li class="nav-item" v-for="(item, index) in navTabs" :key="index">
               <a class="nav-link" :style="{color:pageData.config.color}" :href="item.path">{{ item.name }}</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </el-header>
      <el-main>
        <!-- <router-view :color="pageData.config.color"></router-view> -->
        <!-- emit('ziColor','pink') -->
        <router-view @ziColor="getZiColor"></router-view>
      </el-main>
      <el-footer>
        <footer class="p-5 bg-dark text-white text-center">
          <div class="container">
            <div class="lead">Copyright &copy; 2023 嘻嘻嘻</div>
          </div>
        </footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import request from "../../api/request";
const getZiColor = (color) =>{
  pageData.config.color = color
}
let pageData = reactive({
  config: {
    color: "black"
  }
});

const route = useRoute();
const navTabs = reactive([
  {
    name: "首页",
    path: "/",
  },
  {
    name: "蛋糕分类",
    path: "/classifyList",
  },
  {
    name: "购物车",
    path: "/cart",
  },
  {
    name: "我的订单",
    path: "/order",
  },
  {
    name: "个人信息",
    path: "/customerCenter",
  },
]);
</script>
<style scoped lang="scss">
.common-layout {
  .el-header {
    padding: 0;
    margin: 0;
    height: unset;
    position: absolute;
    top:0;
    // border: 1px solid red;
    width: 100%;
    color:#000;
    z-index: 99999  ;
  }
  .el-main {
    padding: 0;
    margin: 0;
  }

  .el-footer {
    padding: 0;
    margin: 0;
  }
}
</style>
